<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百科</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/daohang.css">
    <link rel="stylesheet" href="./css/baike.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span>职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>
                <li id="app"><a href="./APP.html"><span>APP</span></a></li>
                <li id="news"><a href="./zixun.html"><span>资讯</span></a></li>
                <li id="find"><a href="./faxian.html"><span>发现</span></a></li>
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span id="current">百科</span></a></li>

            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <div class="page-title-wrap">
        <h1>职业百科</h1>
        <p class="count-info">
            BOSS职业百科词条已收录
            <span class="count-num">636</span>
            个职业

        </p>
        <p class="page-sub-title">快速了解不同职业的晋升之路、薪资待遇，更有转行数据及热议问答，助你轻松入行。</p>
    </div>
    <div class="search-input-wrap">
        <div class="search-input showSearch">
            <input type="text" placeholder="搜索职位">
            <button class="search-btn">搜索</button>
        </div>
    </div>
    <section class="hotlist-section">
        <h2 class="section-title">职业榜单</h2>
        <div class="list-pager-wrap">
            <div class="list-page-item-wrap show">
                <ul>
                    <li>
                        <div class="baike-hot-list-item">
                            <div class="list-header">
                                <img src="./img/baike/1.png" alt="">
                                <span>热搜职业榜</span>
                            </div>
                            <div class="list-wrap">
                                <ul>
                                    <li class="list-item">
                                        <span class="list-item-number">1</span>
                                        <div class="list-item-content">
                                            <span>商家运营</span>
                                            <div class="subTitle">化身客服、BD、活动策划，和商家并肩作战，一起创造业绩新高！</div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </li>
                </ul>
            </div>
        </div>
    </section>

    <section class="explore-section">
        <h2 class="section-title">职业探秘</h2>
        <div class="list-pager-wrap2">
            <div class="list-page-item-wrap2 show">
                <ul class="list-page-item-wrap2-ul">
                    <li>
                        <div class="img">
                            <img src="https://img.bosszhipin.com/beijin/cms/1de51b8fcf920ed4c663a9b41d5f1369fbcf1fe2146e01096e1e8f8db8373f69882466c4b4354e1d84d5606bfb0bdf31.jpg"
                                alt="">
                        </div>
                        <p class="card-title">那些傻傻分不清楚的职业们—编辑篇</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="list-pager-wrap3 "  id="list-pager-wrap2">
            <div class="list-page-item-wrap3 show">
                <ul class="list-page-item-wrap3-ul">
                    
                </ul>
            </div>
        </div>
        <div class="pager next">
            >
        </div>
        <div class="pager prev">
            < </div>
    </section>
    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>

                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日 8:00 - 22:00</li>
                    <li>休息日 9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt="">
                            电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt="">
                            京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>
    $(window).ready(function () {
        $.ajax({
            data: 'get',
            url: "/getBaiKe",
            dataType: 'json'
        }).done((data) => {
            let str = ''
            let str1 = ''
            let content = data.content[0]
            data.title.forEach((item, index) => {
                str += `
                    <li data-index=${index}>
                        <div class="baike-hot-list-item">
                            <div class="list-header">
                                <img src="${item.src}" alt="">
                                <span>${item.listHeader}</span>
                            </div>
                            <div class="list-wrap">
                                <ul>          
                                </ul>
                            </div>
                        </div>
                    </li>
                `
            });
            $('.list-page-item-wrap>ul').html(str)

            content.content1.forEach((item1, i) => {

                str1 += `
                    <li class="list-item">
                        <span class="list-item-number">${item1.number}</span>
                        <div class="list-item-content">
                            <span>${item1.jobName}</span>
                            <div class="subTitle">${item1.subTitle}</div>
                        </div>
                    </li>
                `
            })
            $('.list-page-item-wrap>ul .list-wrap>ul').eq(0).html(str1)
            content.content2.forEach((item2, i) => {

                str1 += `
                    <li class="list-item">
                        <span class="list-item-number">${item2.number}</span>
                        <div class="list-item-content">
                            <span>${item2.jobName}</span>
                            <div class="subTitle">${item2.subTitle}</div>
                        </div>
                    </li>
`
            })
            $('.list-page-item-wrap>ul .list-wrap>ul').eq(1).html(str1)
            content.content3.forEach((item1, i) => {

                str1 += `
                    <li class="list-item">
                        <span class="list-item-number">${item1.number}</span>
                        <div class="list-item-content">
                            <span>${item1.jobName}</span>
                            <div class="subTitle">${item1.subTitle}</div>
                        </div>
                    </li>
`
            })
            $('.list-page-item-wrap>ul .list-wrap>ul').eq(2).html(str1)
            content.content4.forEach((item1, i) => {

                str1 += `
                <li class="list-item">
                    <span class="list-item-number">${item1.number}</span>
                    <div class="list-item-content">
                        <span>${item1.jobName}</span>
                        <div class="subTitle">${item1.subTitle}</div>
                    </div>
                </li>
`
            })
            $('.list-page-item-wrap>ul .list-wrap>ul').eq(3).html(str1)
            // console.log($('.list-page-item-wrap>ul .list-wrap>ul'));
            // console.log(data.content[0].content1);
            // data.content[0].content1.forEach((item1, i) => {

            //     str1 += `
            //         <li class="list-item">
            //             <span class="list-item-number">${item1.number}</span>
            //             <div class="list-item-content">
            //                 <span>${item1.jobName}</span>
            //                 <div class="subTitle">${item1.subTitle}</div>
            //             </div>
            //          </li>
            //     `
            // })
            // $('.list-page-item-wrap>ul .list-wrap>ul').eq(0).html(str1)





        })
    })

    $(window).ready(function () {
        $.ajax({
            data: 'get',
            url: "/getBaiKe",
            dataType: 'json'
        }).done((data) => {
            let str = ''
            console.log(data.explore);
            data.explore.forEach((item, index) => {
                str += `
            <li>
                <div class="img">
                    <img src="${item.src}" alt="">
                </div>
                <p class="card-title">${item.cardTitle}</p>
            </li>
            `
            })
            $('.list-page-item-wrap2-ul').html(str)
            
        }).done((data)=>{
            let str = ''
            data.explore2.forEach((item, index) => {
                str += `
            <li>
                <div class="img">
                    <img src="${item.src}" alt="">
                </div>
                <p class="card-title">${item.cardTitle}</p>
            </li>
            `
            })
            $('.list-page-item-wrap3-ul').html(str)
        })

    })

    $('.prev').hide()
    $('.next').click(() => {
        $('.prev').show()
        $('.next').hide()
        $('.list-page-item-wrap2').hide();
        $('.list-page-item-wrap3').show();
    })
    $('.prev').click(() => {
        $('.next').show()
        $('.prev').hide()
        $('.list-page-item-wrap2').show();
        $('.list-page-item-wrap3').hide();
    })

</script>

</html>